{% extends "../../base.html" %}

{% block crumbs %}
    <div class="row">
        <div class="col-md-12">
            <ol class="breadcrumb">
                <li class="active">
                    <a class="this">Project</a>
                </li>
                <li class="active">
                    <a class="this-page">Test project</a>
                </li>
            </ol>

        </div>
    </div>
{% endblock %}

{% block body %}
<div class="row">
	<div class="col-md-12">
    	<div class="panel">
            <div class="panel-heading">
            	<form>
            		<div style="display:inline;">
        	    		<a href="/atp4p/project/add/" class="btn btn-primary">Create</a>
        	    	</div>
            	    <div style="display:inline; float: right;">
	        	    	<input type="button" value="search" id="select"/>
	        	    </div>
	        	    <div style="display:inline; float: right; margin-right: 20px">
		        	    <div style="display:inline;">
		        	    	<label style="width: auto;">Project owner</label>
		        	    </div>
		        	    <div style="display:inline;">
		        	    	<input type="text" autocomplete="off" tabindex="0" id="owner">
		        	    </div>
		        	</div>
		            <div style="display:inline; float: right; margin-right: 20px">
		        	    <div style="display:inline;">
		        	    	<label style="width: auto;">Project name</label>
		        	    </div>
		        	    <div style="display:inline;">
		        	    	<input type="text" autocomplete="off" tabindex="0" id="project">
		        	    </div>
		        	</div>
            	</form>
            </div>
            <div class="panel-body">
            	<table class="table table-bordered">
                	<thead>
                    <tr>
                    	<th width="6%"><input type="checkbox" id="box" onclick="checkAll()" value=""></th>
                    	<th width="8%">ID</th>
                        <th>Project name</th>
                        <th>Project description</th>
                        <th width="10%">Project owner</th>
                        <th width="14%">Created Date</th>
                        <th width="23%">Operation</th>
                    </tr>
                    </thead>
                    <tbody id="content">
                    </tbody>
                </table>
                <div id="barcon" name="barcon"></div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascript %}
<script>
    function run_button(obj) {
    	var project = obj.parentNode.parentNode.children[2].innerText;
        $.ajax({
            type: 'get',
            url: "/atp4p/project/run/",
            data:
                {
                    "project": project,
                },
            success: function (res) {
            	var code = res.code;
            	if(code == 0){
                	alert("Run successfully!");
                }else{
                	alert("Run failure!"+res.msg);
                }
            },
            error: function (res) {
                alert("Run failure!"+res);
            }
        });
    };
    
    function stop_button(obj) {
    	var project = obj.parentNode.parentNode.children[2].innerText;
        $.ajax({
            type: 'get',
            url: "/atp4p/project/stop/",
            data:
                {
                    "project": project,
                },
            success: function (res) {
            	var code = res.code;
            	if(code == 0){
                	alert("Stop successfully!");
                }else{
                	alert("Stop failure!"+res.msg);
                }
            },
            error: function (res) {
                alert("Stop failure!"+res);
            }
        });
    };
</script>

<script>
	window.onload = select();

	$("#select").click(function(){
	   	select();
	});

	function select() {
	    var owner = $("#owner").val();
	    var project = $("#project").val();
	    var url = `/atp4p/project/list/?project=${project}&owner=${owner}`;
	    $.ajax({
			type: 'GET',
			url: url,
			dataType:'json',
			success: function(res){
				var data = res.data;
		    	var len = data.length;
		    	var out = "";
				if(len > 0){
			        for(var i = 0; i < len; i++){
			        	out += 
			        		`<tr>
			        		<td><input type="checkbox" aria-hidden="false" value=${data[i].id} onclick="check()" name="checkOne"></td>
                        	<td>${data[i].id}</td>
                            <td>${data[i].project}</td>
                            <td>${data[i].description}</td>
                            <td>${data[i].owner}</td>
                            <td>${data[i].create_time}</td>
                            <td>
                                <a href="/atp4p/project/query?project=${data[i].project}"
                                	class="layui-btn layui-btn-xs">Detail</a>
                                <a href="#" style="color: red" onClick="del('${data[i].project}')">Delete</a>
                                <a href="/atp4p/file/?project=${data[i].project}">File</a>
                                <button type="button" onclick="run_button(this)" class="btn btn-primary">Run</button>
                                <button type="button" onclick="stop_button(this)" class="btn btn-warning">Stop</button>
                            </td>
                        	</tr>`;
					}
	            }
	            $('#content').html(out);
	            goPage(1,10);
			}
		});
	};
</script>

<script>
function del(project){
	const ans = confirm("All test scripts and results will be deleted. Are you sure you want to delete them?");
	var url = `/atp4p/project/delete/?project=${project}`;
	if (ans===false) {
		event.preventDefault();
       return false;
    }else{
		$.ajax({
			type: 'GET',
			url: url,
			dataType:'json',
			success: function(res){
				var code = res.code;
				if (code==0){
					alert("Successfully deleted!");
					select();
				}else{
					alert("Deletion failure!"+res.msg);
				}
			},
			error: function(res){
				alert("Deletion failure!"+res.msg);
			}
		});
    };
}
</script>
{% endblock %}